<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索数据展示</title>
</head>

<body>
    <div class="content">
        <div class="search">
            <input type="text" id="val" placeholder="请输入课程">

            <input type="submit" id="sub">
        </div>
        <div class="show" id="show">
            <!-- <p>哈哈哈</p>
            <p></p> -->
        </div>
    </div>
    <script>
        let val = document.getElementById('val')
        let show = document.getElementById('show')
        let arr = ['精英特训', 'css核心技术', '在线商城', 'js核心技术', 'vue核心技术']

        val.onkeyup = () => {
            show.style.display = 'block'

            let str = ''
            arr.forEach((item) => {
                let res = item.indexOf(val.value)
                console.log(res);
                console.log(indexOf('css核心技术', '在线商城'));
                // !=-1
                if (res != -1) {
                    // <p>哈哈哈</p>和arr[0]
                    str += `<p>${item}</p>`
                }

            })

            // show.innerHTML = str
            // val值与str做对比
            if (!val.value || !str) {
                show.innerHTML = `<p>暂无结果</p>`
            } else {
                show.innerHTML = str
            }

        }

        val.onblur = () => {
            show.style.display = 'none'
            val.value = ''
        }
    </script>
</body>

</html>